import React, { Component } from 'react'
import BookList from './components/BookList'
import axios from "axios";
// 渲染属性：当组件中的结构有一部分不同，不同的部分可以通过渲染属性完成
class App extends Component {
    state = {
        bookInfo:{}
    }
    render() {
        return (
            <div>
                <BookList bookInfo = {this.state.bookInfo.boy}>
                    <h3 style={{color:"blue"}}>男生小说</h3>
                </BookList>
                <hr/>
                <BookList bookInfo = {this.state.bookInfo.girl}>
                    <h3 style={{color:"red"}}>女生爱看</h3>
                </BookList>
            </div>
        );
    }
    componentDidMount() {
        axios.get("http://localhost:8080/book.json").then(value=>{
            this.setState({
                bookInfo:value.data
            })
        })
    }
}

export default App;